<template>
    <el-dialog v-model:model-value="state.deteleBool" destroy-on-close :title="props.title" center :width="304"
        :show-close="false" append-to-body :before-close="handleClose">
        <div>
            <slot>
            </slot>
        </div>
        <div class="detele-main">
            <!-- <img v-if="data.error" src="@/assets/imgs/vector 2.png" alt="" srcset="" /> -->
            <!-- <p class="title2">{{ data.title2 }}</p> -->
            <div class="flex">
                <ElButton @click="buttonClick(false)">{{ t('dialogDemo.cancel') }}</ElButton>
                <ElButton type="primary" @click="buttonClick(true)">{{ t('dialogDemo.sure') }}</ElButton>
            </div>
            
            
        </div>
    </el-dialog>
</template>

<script lang="tsx" setup>
import { ElDialog } from 'element-plus'
import { reactive, watch } from "vue"
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
    title: {
        type: String,
        default: () => ""
    },
    deteleBool: {
        type: Boolean,
        default: () => false
    }
})
watch(() => props.deteleBool, (newValue: any) => {
    state.deteleBool = newValue
})
const state = reactive({
    deteleBool: false
})
const handleClose=()=>{
    emit('deteleClick', false)
}
const emit = defineEmits(['deteleClick'])
const buttonClick = (val) => {
    console.log("detele:", val);
    emit('deteleClick', val)

}
</script>
<style lang="less">
.el-dialog__header {

    .el-dialog__title {
        font-size: 20px;
        font-family: 'HarmonyOS Sans SC-Medium, HarmonyOS Sans SC';
        font-weight: 500;
        color: #3D3D3D;
    }

}

.el-dialog--center .el-dialog__body {
    // padding: 0px 25px 25px 30px;
    // height: 56px;
    // display: flex;
    // justify-content:space-around;
    // align-items: center;
}
</style>
<style lang="less" scoped>
.detele-main {
    display: flex;
    align-items: center;
    justify-content: space-around;

    img {
        width: 58px;
        height: 58px;
    }

    p {
        font-size: 20px;
        font-family: 'HarmonyOS Sans SC-Medium, HarmonyOS Sans SC';
        font-weight: 500;
        color: #3D3D3D;
    }

    .title2 {
        font-size: 14px;
        font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
        font-weight: 400;
        color: #9AA0A6;
    }
    .el-button{
        width: 82px;
    }

}
</style>